import React, { memo, useEffect, useState } from "react";
import { View, ScrollView } from '@tarojs/components'
import { Empty } from '@antmjs/vantui'
import { ReportHeader, FundMsg, AchievementReport, RevenueCompair, PrivateOpinion, NetWorthTrend, GainsComparision } from "@/components"
import { getNavBarHeight } from "@/utils";
import { useRouter } from '@tarojs/taro'
import { useDispatch, useSelector } from "react-redux";

import './index.scss'

// const ReportContext = createContext({});

function ReportDetail() {

  let router = useRouter()
  const dispatch = useDispatch()
  const { noData } = useSelector(state => state.obsPool)
  const [reportItem, setReportItem] = useState({})

  const [navBarHeight, setNavBarHeight] = useState<any>('')



  useEffect(() => {
    let data = {}
    if (router.params.data) {
      data = JSON.parse(decodeURIComponent(router.params?.data))
    }
    setReportItem(data)
    dispatch({
      type: 'obsPool/asyncObservationPoolDetail',
      payload: {
        reportId: data?.reportId
      }
    })
   
  }, [router.params])
  useEffect(() => {
    let result = getNavBarHeight()
    setNavBarHeight(result)
  }, [])


  return (
    <View className='body'>

      <ReportHeader reportItem={reportItem} />
      <ScrollView scrollY className='scroll-body-box' style={{ height: `calc(100vh - ${navBarHeight}px)` }}>
        {
          noData ?
            <Empty
              image='https://static.hzddyy.com/taiyi/tt/public_placeholder_nodata.png'
              description='暂无数据'
            />
            :
            <>
              <View >
                <FundMsg />
                <AchievementReport />
                <RevenueCompair />
              </View>
              <NetWorthTrend />
              <GainsComparision />
              <PrivateOpinion />
            </>
        }

      </ScrollView>
    </View>



  )
}

export default memo(ReportDetail)
